* {
  margin: 0;
  padding: 0;
  
}
body{
  background-image: url(../images/1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100%;
}

a {
  color: unset;
  text-decoration: none;
}
.section1 {
  width: 100%;
  height: 100vh;
  position: relative;
  color: white;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.container h1 {
  font-size: 50px;
}
.container p {
  font-size: 30px;
}
.header-class {
  z-index: 1;
  position: absolute;
  right: 2%;
}
.header-class span {
  display: block;
  font-weight: bold;
  font-size: 30px;
}
.top{
  position: fixed;
  bottom: 10px;
right: 10px;
  z-index: 9998;
  border: 3px solid darkgrey ;
  border-radius: 10px;
  background-color: white ;
 cursor: pointer;
}
.top img{
  width: 50px;
  height: 50px;
}

.nav {
  background-image: url(../images/6.jpg);
  background-repeat: no-repeat;
  background-position: center;
 
  background-size: 100%;
  transition: all 1s;
  font-size: 20px;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  border:2px solid grey;
  box-shadow: 0 0 15px 1px grey;
 
}
.nav ul {
  list-style: none;
  overflow: hidden;
}
.nav li {
 margin: 0 40px; 
 
}
.nav a {
  line-height: 100px;
  text-decoration: none;
  color: black;
  font-family: 方正粗黑宋简体;
  
}
.nav a:hover{
  color:teal;
}
/* add */
.nav a,
.nav li {
  display: inline-block;
  height: 100px;
}
.nav-active a {
  color: teal !important;
}
/* ------ */
.section2 {
  height: 100vh;
  width: 100%;
  position: relative;
}
.section2 h2 {
  font-size: 40px;
  line-height: 70px;
  border-bottom: #ef7674 5px solid;
  display: inline-block;
}
.section2-header {
  height: 50px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 13%;
}
.content {
  /* width: 1300px; */
  height: 500px;
  position: absolute;
  top: 20%;
  left: 10%;
  text-align: center;
}
.content-first{
  width: 400px;
  height: 600px;
  position: absolute;
  top:10%;
			margin:50px auto;
      
			transform: rotateY(15deg) rotateX(-15deg);
			transform-style: preserve-3d;
			animation:xuanzhuan 8s linear infinite;
      
}
@keyframes xuanzhuan{
  0%{
    transform: rotateY(15deg) rotateX(45deg);
  }
  50%{
    transform: rotateY(375deg) rotateX(-45deg);
  }
  100%{
    transform: rotateY(735deg) rotateX(45deg);
  }
}
.content-first:hover{
  animation-play-state: paused;
}
.content-first div.front{
  background-image: url(../images/01.jpg);
  background-size: 100%;
  background-position: center;
  transform: translateZ(100px);
}
.content-first div.back{
  background-image: url(../images/02.jpg);
  background-size: 100%;
  background-position: center;
  transform: translateZ(-100px) rotateY(180deg);
}
.content-first div.left{
  background-image: url(../images/03.jpg);
  background-size: 100%;
  background-position: center;
  transform:translateX(-100px) rotateY(-90deg);
}
.content-first div.right{
  background-image: url(../images/04.jpg);
  background-position: center;
  background-size: 100%;
  transform:translateX(100px) rotateY(90deg);
}
.content-first div.top{
  background-image: url(../images/05.jpg);
  background-position: center;
  background-size: 100%;
  transform:translateY(-100px) rotateX(90deg);
}
.content-first div.bottom{
  background-image: url(../images/06.jpg);
  background-position: center;
  background-size: 100%;
  transform:translateY(100px) rotateX(-90deg);
}
.content-first div{
  position: absolute;
  left:0;
  top:0;
  width: 200px;
  height: 200px;
  
  
  
}
.aboutme{
 border: 3px solid lightslategray;
 position: relative;
  top:5%;
 left: 95%;
  width: 550px;
  height: 450px;
}
.jieshao{
color: rgb(177, 236, 224);
width: 200px;
height: 50px;
font-size: 35px;
border-radius: 10px;
background-color: rgb(230, 113, 167);
text-align: center;
position: absolute;
left: 30%;
top: 2%;
}
.name{
  
  position: absolute;
  top: 20%;
  left: 7%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
 

}
.name span{
  font-size: 30px;
  font-family: 方正粗黑宋简体;
  margin: 0 40px;
  color: coral;
  cursor: pointer;
 
}
.name span:hover{
  color: black;
}
.section3 {

padding-top: 110px;
width: 1200px;
height: 100%;

 
}
.item{
  width: 1200px;
  display: flex;
  margin-left: 80px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 
  
}
.item-box{
  margin-left: 20px;
  margin-bottom: 50px;
  position: relative;
}
.item img{
  display: block;
  margin: 10px;
}

.item-box span{
  font-size: 25px;
  text-align: center;
  position: absolute;
  left: 12%;
  
  color: black;
  font-family: 方正粗黑宋简体;

}
.item-box span:hover{
  color: coral;
}





.section4 {
  
  height: 100vh;
  width: 100%;
  position: relative;
}
.section4-header {
  height: 50px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 13%;
}
.section4 h2 {
  font-size: 40px;
  line-height: 70px;
  border-bottom: #ef7674 5px solid;
  display: inline-block;
}
.section4-header p {
  font-size: 20px;
  display: block;
  padding-top: 20px;
}
.hobby {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 40%;
  display: flex;
  justify-content: space-around;
}




/*.p1 {
  display: block;
  position: absolute;
  top: 7%;
  left: 9%;
  font-size: 20px;
  color: white;
  cursor: pointer;
  display: none;
}
.p2 {
  display: block;
  position: absolute;
  top: 7%;
  left: 39%;
  font-size: 20px;
  color: white;
  cursor: pointer;
  display: none;
}
.p3 {
  display: block;
  position: absolute;
  top: 7%;
  left: 72%;
  font-size: 20px;
  color: white;
  cursor: pointer;
  display: none;
}
/* add */


/* --------- */


.section5 {
  
  height: 100vh;
  width: 100%;
  position: relative;
}
.section5 h2 {
  font-size: 40px;
  line-height: 70px;
  border-bottom: #ef7674 5px solid;
  display: inline-block;
}
.section5-header {
  height: 50px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 13%;
}





/* add */


/* ------- */
.contactme {
  position: absolute;
  line-height: 55px;
  width: 185px;
  top: 80%;
  right: 5%;
  font-family: 方正粗黑宋简体;
  text-align: center;
  border-radius: 10%;
  cursor: pointer;
  color:lightcoral;
  font-size: 40px;
  border-radius:30px;
  background-color: rgb(221, 205, 216);
}
.contactme p{
  animation: move 1s infinite reverse;
}
@keyframes move{
  0%{
    font-size: 40px;
  }
  20%{
    font-size: 42px;
  }
  40%{
    font-size: 44px;
  }
  60%{
    font-size: 46px;
  }
  80%{
    font-size: 48px;
  }
  100%{
    font-size: 50px;
  }
}
.contactme p:hover {
  z-index: 9999;
  transition: all 1s;
 
  
  color:lightsalmon
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
.profile{
  display: flex;
}
.personal{
  align-self: center;
  background: url(../images/head.png) content-box center / 100% no-repeat;
  margin: 0 5px;
  width: 40px;
  height: 40px;
  padding: 3px;
  border: 1px solid #EEC900;
  border-radius: 50%;
  cursor: pointer;
}
.personal:hover{
  box-shadow: 0 0 10px 2px #EEC900
}
.drop-list{
  display: none;
  flex-direction: column;
  border-radius: 10%;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  height: 300px;
}
.drop-list a{
  text-decoration: none;
  color: white;
}
.section1 ul:hover{
  
  display: flex;
}
 .section1 ul {
  font-size: 20px;
  height: 330px;
  line-height: 56px;
  padding: 5px 20px;
  float: left;
  list-style: none;
}
.dropdown:hover .drop-list{
  display: flex;
}
.drop-list a:hover{
  color: #EEC900;
}
.section6{
  height: 100vh;
  width: 100%;
  
  position: relative;
}
.section6-header{
  position: absolute;
  width: 100%;
  height: 50px;
  top: 13%;
  text-align: center;
}
.section6-header h2{
  font-size: 40px;
  line-height: 70px;
  border-bottom: #ef7674 5px solid;
  display: inline-block;
}
.section6-header p{
  font-size: 20px;
  display: block;
  padding-top: 20px;
}
.skills{
  height: 400px;
  width: 900px;
  position: absolute;
  top: 25%;
  left: 12%;

}
.skills li{
  list-style: none;
  position: relative;
  font-size: 20px;
  font-family: 方正粗黑宋简体;
  margin: 20px;
}
.skills ul li .max {
  display: inline-block;
  width: 300px;
  height: 30px;
  background-color: #EEC900;
  border-radius: 20px;
}
.skills ul li .htmlcss {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 200px;
  height: 30px;
  background-color: palevioletred;
  border-radius: 20px;
}
.skills ul li .js {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 120px;
  height: 30px;
  background-color: #3250b4;
  border-radius: 20px;
}
.skills ul li .vue {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 120px;
  height: 30px;
  background-color: green;
  border-radius: 20px;
}
.skills ul li .small {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 150px;
  height: 30px;
  background-color: purple;
  border-radius: 20px;
}
.skills ul li .else {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 180px;
  height: 30px;
  background-color: tomato;
  border-radius: 20px;
}
.main {
  width: 900px;
  height: 200px;
  position: absolute;
  bottom: 12%;
  
  left: 20%;
}
.main p{
  text-indent: 2em;
  font-size: 18px;
}
.section5-header p{
  font-size: 20px;
  display: block;
  padding-top: 20px;
}
.footer{
  position:absolute;
  bottom: 0;
  left: 30%;
  height: 80px;
  width: 600px;

  text-align: center;
}
.footer a{
  text-decoration: none;
  color: black;
  margin: 0 15px;
}
.footer a:hover{
  color: #EEC900;
}
.others{
  position: absolute;
  bottom: 20%;
  right: 10%;
 
  font-size: 17px;
}
.others a{
  text-decoration: none;
  
}
.others i{
  color: orange;
}
.others a:hover{
  border-bottom: purple solid 2px;
}
.D {
  background-size: 40px;
  position: absolute;
  left: 220px;
  top: 20px;
}
.E {
  position: absolute;
  left: 450px;
  top: 130px;
}
.P {
  top: 230px;
  left: 600px;
  position: absolute;
}
.heng {
  background-color: rgb(221, 205, 216);
  width: 520px;
  height: 15px;
  border-radius: 7.5px;
  position: absolute;
  left: 450px;
  top: 218px;
}
.design{
  
  height: 50px;
  position: absolute;
  top:400px;
  left: 330px;
  font-size: 35px;
  color:rgb(230, 113, 167);
  font-family: 方正粗黑宋简体;
  cursor: pointer;
}
.design p:hover{
  color: coral;
}
.bgm_btn{
  width:60px;
  height:200px ;
  
  height:auto;
  z-index: 10000;
  position: fixed;
  top: 120px;
  right: 0;
}
.bgm_btn span{
  color:black;
  cursor: pointer;
  display:block;
  width:58px;
  height:52px;
  margin-bottom:10px;
 
  background-size:70% 70%;
  background-repeat:no-repeat;
  background-position:center}
  .bgm_btn>span:nth-child(1){
    background-image:url(../images/开始.png);
   
  }
  .bgm_btn>span:nth-child(2){
    background-image: url(../images/暂停.png);
  }
  .bgm_btn>span:nth-child(3){
    background-image: url(../images/下一个.png);
  }
  .bgm_btn>span:nth-child(4){
    background-image: url(../images/循环.png);
  }
  .bgm_btn>span:hover{
  background-color:lightgrey;
  }
  .bgm_echo{
    position: fixed;
    font-family: 方正粗黑宋简体;
    top: 55px;
    right: 15px;
    color: white;
  }
  #bgm{display:none}


  #vcomments{
    background-color: rgba(0, 0, 0, 0.9);
    margin-top: 200px;
    padding: 150px;
  }
  #vcomments *{
    color: #fff!important;
  }
 
.title5{
  width: 200px;
  height: 50px;
  font-size: 35px;
  color: white;
  position: relative;
  top: 40%;
  background-color: red;
text-align: center;
left: 42%;
border-radius: 10px;
}
.yuanquan{
  width: 800px;
  height: 550px;
  
  position: relative;
  top: 18%;
  left: 25%;
}

.circle-2{
  width: 88vh;
  height: 88vh;
  z-index: 2;
  
  border: 3px solid transparent;
  border-left: 3px solid #000;
        border-radius: 50%;
        position: absolute;
        top: 2%;
        left: 2%;
        animation: rotate 20s infinite linear;
}
.circle-3{
  width: 77vh;
  height: 77vh;
  z-index: 2;
  
  border: 3px solid transparent;
  border-top: 3px solid #000;
  border-radius: 50%;
  position: absolute;
  top: 7%;
  left: 5%;
  animation: rotate 15s infinite linear;
}
.circle-4{
  width: 66vh;
        height: 66vh;
        z-index: 2;
        border: 3px solid transparent;
        border-bottom: 3px solid #000;
        border-radius: 50%;
        position: absolute;
        top: 12%;
        left: 9%;
        animation: rotate 8s infinite linear;
}
.circle-5{
  width: 55vh;
  height: 55vh;
  z-index: 2;
  border: 3px solid transparent;
  border-right: 3px solid #000;
  border-radius: 50%;
        position: absolute;
        top: 16%;
        left: 12%;
        animation: rotate 10s infinite linear;
}
.circle-6{
  width: 44vh;
  height: 44vh;
  z-index: 2;
  border: 3px solid transparent;
  border-left: 3px solid #000;
  border-radius: 50%;
        position: absolute;
        top: 22%;
        left: 16%;
        animation: rotate 12s infinite linear;

}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.contact{
  width: 200px;
  height: 180px;
  
  position: absolute;
  top: 36%;
  left: 23%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

 
}
.qq-icon{
  
  
  width: 80px;
  height: 75px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
  margin: 5px 10px;
  cursor: pointer;
  
}
.qq-icon i{
  font-size: 50px;
  border-radius: 30%;
  color: #000;
  font-weight: bold;
}
.qq-icon i:hover{
  color: white;
  background-color: black;
  font-size: 60px;
  transition: all 1s;
}
.vx-icon{
  width: 75px;
  height: 75px;
  margin: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
}
.vx-icon i{
  font-size: 50px;
  border-radius: 30%;
  color: #000;
  
}
.vx-icon i:hover{
  color: white;
  background-color: black;
  font-size: 60px;
  transition: all 1s;
}
.youjian-icon{
  width: 75px;
  height: 75px;
  margin: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
}
.youjian-icon i{
  font-size: 50px;
  border-radius: 30%;
  color: #000;
}
.youjian-icon i:hover{
  color: white;
  background-color: black;
  font-size: 60px;
  transition: all 1s;
}
.weibo-icon{
  width: 75px;
  height: 75px;
  margin: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
}
.weibo-icon i{
  font-size: 50px;
  border-radius: 30%;
  color: #000;
}
.weibo-icon i:hover{
  color: white;
  background-color: black;
  font-size: 60px;
  transition: all 1s;
}
.git{
  width: 70px;
  height: 70px;
  position: relative;
 
left: 83%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30%;
}
.git i{
  font-size: 50px;
  color: black
  border-radius: 30%;
  font-weight: bold;
}
.git i:hover{
  color: white;
  background-color: black;
  font-size: 60px;
  transition: all 1s;
  border-radius: 30%;
}
.item-box img:hover{
  transform: scale(1.1, 1.1);
  z-index: 9999;
  transition: all 1s;
}
.lunbo{
  cursor: pointer;
    position: relative;
    width:600px;height:400px;
    margin-left: auto;margin-right: auto;
    border:1px solid #333;
    
    top: 22%;
    left: 15%;
}

#list{
  position: absolute;
  width:600px;
  height:400px;
}
#list img,#prev,#next,#btns{
  position: absolute;
}
#list img:not(:first-child){
  display: none;
}
#prev,#next{
  cursor: pointer;
  top:50%;transform: translateY(-50%);
  z-index: 100;width:40px;height:70px;
  background:url("../images/icon-slides.png");
  border:none;
}
#prev{
  background-position-x:-86px
}
#prev:hover{
  background-position: 0;
}
#next:hover{background-position-x: -43px}
#next{
  right:0;
  background-position-x:-125px;
}
#btns{z-index: 101;
  transform: translateX(-50%);
  bottom: 20px;left:50%;}
#btns .current{
  background:orangered;
}    
#btns>span{
  cursor: pointer;
  width:20px;
  height:20px;
  display: inline-block;
  border-radius: 50%;
  border:1px solid #fff;
  background-color:rgba(44,44,44,.3);
}
.yemian{
  width: 600px;
  height: 50px;
  
  position:relative;
  top: 24%;
  left: 43%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.yemian a{
  display: inline-block;
  background-color:black;
  width: 140px;
  margin-left: 10px;
 font-size: 25px;
 text-align: center;
 color: white;
 border-radius: 10px;
}
.yemian a:hover{
  transform: scale(1.1, 1.1);
  z-index: 9999;
  transition: all 1s;
  
}